<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
import {ref} from 'vue'
const router = useRouter()
const currentPath = ref<string>('/')
interface parame{
  path:string,
  index:number
}
const routerHandler=(path:string)=>{
  router.push(path)
  router.afterEach((to)=>{
    currentPath.value = to.path
  })
}

onMounted(()=>{
 let path = router.currentRoute.value.fullPath
 currentPath.value = path
})
</script>

<template>
  <div class="tabbar">
    <div class="item" @click="routerHandler('/')">
      <img src="../assets/tabbar/index.png" alt="" v-if="currentPath!=='/'">
      <img src="../assets/tabbar/index-active.png" alt="" v-else>
      <span>首页</span>
    </div>
    <div class="item" @click="routerHandler('/category')">
      <img src="../assets/tabbar/cate.png" alt="" v-if="currentPath!=='/category'">
      <img src="../assets/tabbar/cate-active.png" alt="" v-else>
      <span>分类</span>
    </div>
    <div class="item"@click="routerHandler('/shopcar')">
      <img src="../assets/tabbar/cart.png" alt="" v-if="currentPath!=='/shopcar'">
      <img src="../assets/tabbar/cart-active.png" alt="" v-else>
      <span>购物车</span>
    </div>
    <div class="item" @click="routerHandler('/my')">
      <img src="../assets/tabbar/my.png" alt="" v-if="currentPath!=='/my'">
      <img src="../assets/tabbar/my-active.png" alt="" v-else>
      <span>我的</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.tabbar{
  width: 100%;
  height: 50px;
  background-color: white;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  display: flex;
  .item{
   display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   img{
    width: 25px;
    height: 25px;
   }
   span{
    font-size: 12px;
   }
  }
}

</style>
